<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GUCCI</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/page1.css">
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2478001_6lywiddr3o.css">

</head>

<body>
    <div class="wrap">
        <div class="header">
            <div class="line1">
                <p><span class="iconfont icon04">配送至：中国大陆地区 </span><span> 客户服务</span><span class="iconfont icondianhua1">400.8210.582</span></p>
                <p><img src="https://res.gucci.cn/images/common/gucci-logo@2x.png" alt="gucci"></p>
                <p><a href="./login.html" class="login">登录</a><em class="iconfont icontubiaozhizuomoban-18"></em><a href="./shoppingCart.html"><i class="iconfont iconicon-">购物袋</i></a></p>
                <div class="show">
                    <p class="sjx"></p>
                    <span>拥有古驰账号你将获得以下权利:</span>
                    <ul>
                        <li>保存您的心愿清单</li>
                        <li>个性化您的推荐内容</li>
                        <li>订单寄送追踪及退换货处理</li>
                    </ul>
                    <!-- <a href="login.html"><button class='btn1'>登录</button></a>
                    <a href="#"><button class="btn2">注册</button></a> -->
                </div>
            </div>
            <div class="line2">
                <ul class="nav">
                    <li>全新资讯</li>
                    <li>手袋</li>
                    <li>女士</li>
                    <li>男士</li>
                    <li>童装</li>
                    <li>礼品</li>
                    <li>珠宝和腕表</li>
                    <li>美妆</li>
                    <li>家饰</li>
                    <li>古驰故事</li>
                </ul>
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <p class="word1">手袋</p>
                    <p class="word w1">古驰宠儿精选</p>
                    <div class="shop">点击购买</div><img src="./imgs/p1.jpg" alt="">

                </div>
                <div class="swiper-slide">
                    <p class="word w2">EPILOGUE春夏系列</p>
                    <div class="shop s1">女士系列</div>
                    <div class="shop s2">男士系列</div><img src="./imgs/p2.jpg" alt="">

                </div>
                <div class="swiper-slide">
                    <p class="word w3">GG Multicolor系列</p>
                    <div class="shop">点击购买</div><img src="./imgs/p3.jpg" alt="">

                </div>
                <div class="swiper-slide">
                    <p class="word">GUCCI OFF THE GRID系列</p>
                    <div class="shop">点击购买</div><img src="./imgs/p4.jpg" alt="">

                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev swiper-button-white "></div>
            <div class="swiper-button-next swiper-button-white "></div>

            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <div class="drag">
            <div class="first">
                <div class="iconfont iconDxuanzhuan rotate"></div>
                <div class="tu"><img src="./imgs/x10.jpg" alt=""></div>
                <p class="word w4">GG Multicolor系列GG Marmont小号肩背包</p>
                <a href="./goodslist.html" class="a">
                    <div class="shop s3">点击购买</div>
                </a>
            </div>
            <div class="second">
                <!-- <div class="tu1"><img src="./imgs/d1.jpg" alt=""></div>
                <p class="word w5">GG Multicolor系列</p>
                <div class="shop s4">点击购买</div>
                <div class="y1">
                    <div><img src="./imgs/y1.jpg" alt=""></div>
                    <p>手袋</p>
                    <p>GG Multicolor系列融合多种缤纷色彩</p>
                    <p>更多 ></p>
                </div>
                <div class="y2">
                    <div><img src="./imgs/y2.jpg" alt=""></div>
                    <p>外套&飞行员夹克</p>
                    <p>无边序曲系列的全新GG Multicolor系列，打造炫目拼色效果</p>
                    <p>更多 ></p>
                </div>
                <div class="y3">
                    <div><img src="./imgs/y3.jpg" alt=""></div>
                    <p>半裙</p>
                    <p>GG Multicolor系列为典藏设计带来全新可能</p>
                    <p>更多 ></p>
                </div> -->
            </div>
            <div class="three">
                <!-- <div class="tu2"><img src="./imgs/y4.jpg" alt=""></div>
                <div class="y4">
                    <div><img src="./imgs/y5.jpg" alt=""></div>
                    <p>GG Multicolor系列</p>
                    <p>双G标识以缤纷色彩重新演绎</p>
                    <p>更多 ></p>
                </div>
                <p class="word w5">GG Multicolor系列大号托特包</p>
                <div class="shop s4">点击购买</div> -->
            </div>
            <div class="four">
                <img src="./imgs/big.jpg" alt="" class="img1">
                <div class="y6">
                    <p>EPILOGUE系列广告形象大片</p>
                    <p>
                        EPILOGUE系列广告形象大片在为时12小时的幕后探秘直播期间拍摄而成。</p>
                    <p>阅读更多 ></p>
                </div>
            </div>
            <div class="five">
                <h1>古驰故事</h1>
                <div class="guc">
                    <div class="gu1">
                        <div class="gu1_1"><img src="./imgs/g1.jpg" alt="">
                            <p>冬日公园诗篇</p>
                            <p>线上宣传大片></p>
                        </div>
                        <div class="gu1_2"><img src="./imgs/g2.jpg" alt="">
                            <p>Zepeto x Gucci</p>
                            <p>全新游戏联名合作</p>
                        </div>
                    </div>
                    <div class="gu2">
                        <div class="gu2_1"><img src="./imgs/g3.jpg" alt="">
                            <p>办公室狂欢</p>
                            <p>假日广告形象大片</p>
                        </div>
                        <div class="gu2_2"><img src="./imgs/g4.jpg" alt="">
                            <p>多元之美</p>
                            <p>全新广告形象大片</p>
                        </div>
                    </div>
                    <div class="gu3"><img src="./imgs/g5.jpg" alt="">
                        <p>Epilogue系列：详情</p>
                        <p>亚力山卓·米开理倾心讲述</p>
                    </div>
                    <div class="shop s7">更多故事</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="left">
                <ul class="top">
                    <li><span>专属服务</span>
                        <ul class="bot">
                            <li>免费标准配送</li>
                            <li>免费礼品包装</li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li>需要帮助？</li>
                            <li></li>
                            <li>联系我们</li>
                            <li>常见问题</li>
                        </ul>
                    </li>
                    <li><span>购物帮助</span>
                        <ul class="bot">
                            <li></li>
                            <li>配送</li>
                            <li>退货</li>
                            <li>发票</li>
                            <li>保养与维修</li>

                        </ul>
                    </li>
                    <li><span>关于公司</span>
                        <ul class="bot">
                            <li>关于GUCCI</li>
                            <li>GUCCI EQUILIBRIUM</li>
                            <li>道德规范</li>
                            <li>职业发展</li>
                            <li>细则及条款</li>
                            <li>隐私与COOKIE</li>
                            <li>企业信息</li>
                        </ul>
                    </li>
                    <li>
                        <span>
                          关注GUCCI  
                        </span>
                        <ul class="bot">
                            <li class="iconfont iconweixin"> 微信</li>
                            <li class="iconfont iconweibo"> 微博</li>
                            <li class="iconfont icondouyin"> 抖音</li>
                            <li class="iconfont icontengxunshipin"> 腾讯视频</li>
                            <li class="iconfont iconjiaqiangban"> 小红书</li>
                            <li></li>
                            <li class="iconfont iconxiaoxi"> 在线顾问</li>
                            <li class="iconfont icondianhua1"> 400.8210.582</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right">
                <ul class="bot1">
                    <li>
                        订阅GUCCI电子资讯</li>
                    <li>
                        通过订阅，即代表您接受GUCCI的<a href="#">隐私政策条款</a></li>
                    <li></li>
                    <li>
                        <form action="#"><input type="text" placeholder="电子邮箱地址" required><button>></button></form>
                    </li>
                    <li></li>
                    <li>直营店查询</li>
                    <li></li>
                    <li><select name="se" id=""><option value="">请选择省</option>
                        <option value="">北京</option><option value="">上海</option><option value="">天津</option></select>
                        <select><option value="">请选择市</option></select></li>
                    <li></li>
                    <li><span>查找其他地区直营店 </span><span>预约门店服务</span></li>
                    <li><span></span><span></span><span></span><span></span></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="./lib/jquery-1.8.3.js"></script>
    <script src="./lib/swiper-bundle.min.js"></script>
    <script src="./js/page1.js"></script>
</body>

</html>